import React, { useState, useEffect } from 'react';
import classnames from 'classnames';
import moment from 'moment';
import { connect } from 'dva';
import { Button, Form, Select, Table, Empty } from 'antd';
import TPage from '@/modules/TPage';
import { YesOrNo, OrgRoleStyle } from '@/public/constant/enums';
import style from './index.css';
const { Option } = Select;
const { Column } = Table;
const List: React.FC<any> = ({ total, list, dispatch }) => {
  const [curPage, setCurPage] = useState(1);
  const [curNickName, setCurNickName] = useState(null);
  const [curUserName, setCurUserName] = useState(null);
  const [curId, setCurId] = useState(null);
  const pageSize = 10;

  function fetchList({ nickname, username, id, page }) {
    dispatch({
      type: 'user/fetchList',
      payload: {
        page,
        nickname,
        username,
        id,
        pageSize
      }
    })
  }
  /**
   * 加载列表数据
   */
  useEffect(({ page = curPage, nickname = curNickName, username = curUserName, id = curId } = {}) => {
    fetchList({ page, nickname, username, id })
  }, [curPage, curNickName, curUserName, curId])


  // 渲染列表查询表单
  const handleQuery = (query: any) => {
    setCurPage(1);
    setCurNickName(null);
    setCurId(null);
    setCurUserName(null);
    if (/^\d+$/.test(query)) {
      setCurId(query);
      return;
    }
    setCurNickName(query);
  }

  function renderTableForm() {
    const WrappedForm = Form.create<any>({ name: 'tableForm' })(function ({ form }) {
      const { getFieldDecorator } = form as any;
      return (
        <Form onSubmit={handleQuery.bind(null, form)} layout={'inline'}>

        </Form>
      );
    })
    return (
      <WrappedForm />
    );
  }

  // 根据渲染类型渲染列表
  const renderActions =
    (record: any) => {
      return (
        <>
          <Button className={style.mr8} type={'ghost'}>上架</Button>
        </>
      );
    }

  return (
    <TPage>
      <TPage.Title>注册用户列表</TPage.Title>
      <TPage.Table>
        <TPage.Search
          placeholder={'请输入ID或用户名，可按回车键搜索'}
          onSearch={handleQuery}
        />
        <TPage.Layout>
          {renderTableForm()}
        </TPage.Layout>
        <Table
          className={classnames(style.mt16, style.user_list)}
          locale={{ emptyText: <Empty description={'无数据'} /> }}
          dataSource={list}
          pagination={{ total, current: curPage, pageSize, onChange: setCurPage }}
          rowKey={(record: any) => record.id}
          scroll={{ x: 1300 }} 
        >
          <Column title={'编号ID'} width={64} dataIndex={'id'} key={'id'} />
          <Column title={'姓名'} dataIndex={'nickname'} key={'nickname'}
            render={(value, record: any) => {
              return <span className={style.thumbnail}>
                < img src={record.hPortrait} />
                {record.nickname}
              </span>
            }}
          />
          <Column title={'所属园所'} dataIndex={'orgName'} key={'orgName'} />
          <Column title={'职位'} dataIndex={'orgRoleName'} key={'orgRoleName'}
            render={(value) => <span style={OrgRoleStyle[value]}>{value}</span>}
          />
          <Column title={'手机号'} dataIndex={'phone'} key={'phone'} />
          <Column title={'座机号'} dataIndex={'landline'} key={'landline'} />
          <Column title={'是否VIP'} dataIndex={'vip'} key={'vip'} render={(value) => <span className={style[+value === 1 ? 'active' : 'default']}>{YesOrNo[value || '0']}</span>} />
          <Column title={'VIP有效期至'} dataIndex={'vipTime'} key={'vipTime'}/>
          <Column title={'VIP有效免费文件下载剩余次数'} dataIndex={'download'} key={'download'} width={220}/>
          <Column title={'注册时间'} dataIndex={'cTime'} key={'cTime'} render={(value) => moment(value).format('YYYY-MM-DD hh:mm:ss')} />
        </Table>
      </TPage.Table>
    </TPage>
  );
}
export default connect((state: any) => {
  return {
    list: state.user.list,
    total: state.user.total,
  };
})(List);